<template>
    <view class="addForm">
        <!-- <u-swiper :list="list1" @click="click" indicator indicatorMode="line" circular :autoplay='true' imgMode=''></u-swiper> -->
        <view class="form2Plan">
            <view class="topBox">
                <view class="topNational">
                    <view>{{orderItem.base.countryChineseName||''}}</view>
                    <view>{{orderItem.base.countryOtherName||''}}</view>
                </view>
                <view class="topTitle">
                    {{orderItem.base.title||''}}
                </view>
                <view class="topText">
                    <view class="item">
                        <view v-show="orderItem.base.stopTime">{{orderItem.base.stopTime||''}}天</view>
                        <view>停留时长</view>
                    </view>
                    <view class="item" style=" width: 40%;">
                        <view>{{orderItem.base.validityPeriod||''}}</view>
                        <view>有效期</view>
                    </view>
                    <view class="item" style="border:none">
                        <view>{{orderItem.base.inputFrequency||''}}</view>
                        <view>入境次数</view>
                    </view>
                </view>
            </view>

            <view class="detailBox">

                <view class="detailItem">
                    <view class="titleText">支付状态</view>
                    <view class="contentText">
                        <span v-show="orderItem.order.orderStatus=='0'">待支付</span>
                        <span v-show="orderItem.order.orderStatus=='1'">已支付</span>
                        <span v-show="orderItem.order.orderStatus=='2'">已退款</span>
                        <span v-show="orderItem.order.orderStatus=='3'">已取消</span>
                    </view>
                </view>

                <view class="detailItem" v-if="orderItem.order.reviewStatus">
                    <view class="titleText">审核状态</view>
                    <view class="contentText">
                        <span v-show="orderItem.order.reviewStatus=='0'">已拒绝</span>
                        <span v-show="orderItem.order.reviewStatus=='1'">已通过</span>
                        <span v-show="orderItem.order.reviewStatus=='2'">办理中</span>
                        
                    </view>
                </view>
                <!-- '/subPackages/remould/showPdf?pdfPath=' -->
                <view class="detailItem" style="display: block;" v-if="orderItem.order&&orderItem.order.reviewRemark">
                    <view class="titleText">反馈文件</view>
                    <view class="contentText" v-if="orderItem.order.reviewRemark"  style="color: #2440b3;text-decoration: underline;word-wrap:break-word;">
                        <view v-for="(item,index) in orderItem.order.reviewRemark?orderItem.order.reviewRemark.split(',') : []" :key="index"
                        @click="gotoPage('/personalCenter/showPdf?pdfPath='+item)">
                        {{orderItem.base.countryChineseName||''}}{{orderItem.base.title||''}}
                        <span v-show="orderItem.order.orderType=='0'">标准办理</span>
                        <span v-show="orderItem.order.orderType=='1'">快速通道</span>
                        <span v-show="orderItem.order.orderType=='2'">团队速惠</span>
{{orderItem.order.peopleName||''}}_{{Number(index+1)}}
                                <!-- {{item.split('/')[item.split('/').length-1]}} -->
                        </view>
                    </view>
                </view>
                <view class="textTitleBox">
                    <view class="titleText">基本信息</view>
                </view>
                <view class="detailItem">
                    <view class="titleText">本人姓名</view>
                    <view class="contentText">{{orderItem.order.peopleName||''}}</view>
                </view>
                <view class="detailItem">
                    <view class="titleText">本人手机号码</view>
                    <view class="contentText">{{orderItem.order.phone||''}}</view>
                </view>
                <view class="detailItem">
                    <view class="titleText">本人家庭地址</view>
                    <view class="contentText">{{orderItem.order.address||''}}</view>
                </view>
                <view class="detailItemImg" v-if="orderItem.order">
                    <view class="titleText">一寸照</view>
                    <view v-show="orderItem.order.headPhoto" style="width:100%;margin-top:10rpx">
                        <image v-for="(item,index) in orderItem.order.headPhoto.split(',')" :key="index" :src="item"
                            @click="LookProjectImages(index,'headPhoto')"></image>
                    </view>
                </view>
                <view class="detailItem">
                    <view class="titleText">紧急联系人手机号码1</view>
                    <view class="contentText">{{orderItem.order.contactsName||''}}</view>
                </view>
                <view class="detailItem">
                    <view class="titleText">紧急联系人手机号码2</view>
                    <view class="contentText">{{orderItem.order.contactsPhone||''}}</view>
                </view>
                <view class="detailItem">
                    <view class="titleText">婚姻状况</view>
                    <view class="contentText">
                        <span v-show="orderItem.order.maritalStatus=='0'">未婚</span>
                        <span v-show="orderItem.order.maritalStatus=='1'">已婚</span>
                        <span v-show="orderItem.order.maritalStatus=='2'">离婚</span>
                        <span v-show="orderItem.order.maritalStatus=='3'">其他</span>
                    </view>
                </view>
                <view class="detailItem">
                    <view class="titleText">工作状况</view>
                    <view class="contentText">
                        <span v-show="orderItem.order.workStatus=='0'">自由职业者</span>
                        <span v-show="orderItem.order.workStatus=='1'">农牧民</span>
                        <span v-show="orderItem.order.workStatus=='2'">学生</span>
                        <span v-show="orderItem.order.workStatus=='3'">个体户</span>
                        <span v-show="orderItem.order.workStatus=='4'">普通职员</span>
                        <span v-show="orderItem.order.workStatus=='5'">企业高管/老板</span>
                        <span v-show="orderItem.order.workStatus=='6'">专业技术人员</span>
                        <span v-show="orderItem.order.workStatus=='7'">公务员/事业单位人员</span>
                        <span v-show="orderItem.order.workStatus=='8'">退休人员</span>
                        <span v-show="orderItem.order.workStatus=='9'">其他</span>
                    </view>
                </view>

                <view class="detailItemImg" v-if="orderItem.order">
                    <view class="titleText">护照照片</view>
                    <view v-show="orderItem.order.passportImg" style="width:100%;margin-top:10rpx">
                        <image v-for="(item,index) in orderItem.order.passportImg.split(',')" :key="index" :src="item"
                            @click="LookProjectImages(index,'passportImg')"></image>
                    </view>
                </view>
                <view class="textTitleBox">
                    <view class="titleText">订单信息</view>
                </view>

                <view class="detailItem">
                    <view class="titleText">订单类型</view>
                    <view class="contentText">
                        <span v-show="orderItem.order.orderType=='0'">标准办理</span>
                        <span v-show="orderItem.order.orderType=='1'">快速通道</span>
                        <span v-show="orderItem.order.orderType=='2'">团队速惠</span>
                    </view>
                </view>
                <view class="detailItem">
                    <view class="titleText">订单编号</view>
                    <view class="contentText">{{orderItem.order.orderCode||''}}</view>
                </view>
                <view class="detailItem">
                    <view class="titleText">支付时间</view>
                    <view class="contentText">{{orderItem.order.payTime||''}}</view>
                </view>
                <view class="detailItem">
                    <view class="titleText">支付金额</view>
                    <view class="contentText">{{orderItem.order.payMoney||''}}元</view>
                </view>
                <view class="detailItem">
                    <view class="titleText">交易流水号</view>
                    <view class="contentText">{{orderItem.order.transCode||''}}</view>
                </view>
                <view class="detailItem" v-if="orderItem.order.refundTime">
                    <view class="titleText">退款时间</view>
                    <view class="contentText">{{orderItem.order.refundTime||''}}</view>
                </view>
                
                <!-- <view class="detailItem">
                    <view class="titleText">pdf文件路径</view>
                    <view class="contentText">{{orderItem.order.visaPdf||''}}</view>
                </view>
                <view class="detailItem">
                    <view class="titleText">文件上传时间</view>
                    <view class="contentText">{{orderItem.order.pdfCreateTile||''}}</view>
                </view> -->
            </view>
        </view>
        <cc-bottom/>
    </view>
    <!-- </commonHtml> -->
</template>

<script>
import Validate from "../utils/tools/validate.js";
export default {
    data() {

        return {

            styleSheet: {
                0: 'color: #3187FF',
                1: 'color: #00D82C',
                2: 'color: #ff9800',
                3: 'color: #f00',
                4: 'color: #FF8F1F',
            },
            infoData: {},
            showPost: false,
            showName: false,
            showIndustry: false,
            showRegion: false,
            actions: [{
                name: '男',
            },
            {
                name: '女',
            },
            {
                name: '保密',
            },
            ],
            fileList1: [],
            fileList2: [],
            fileList3: [],
            fileList4: [],
            fileList: [],
            columns: [],
            model1: {
                peopleName: '',
                passportImg: '',
                headPhoto:''
            },
            passportImgList: [],
            headPhotoList: [],
            

            current: 1,
            rules: {
                peopleName: [{
                    required: true,
                    message: '请输入本人姓名',
                    trigger: ['blur', 'change']
                }],
                phone: [{
                    type: "string",
                    required: true,
                    message: "请输入本人手机号码",
                    trigger: ["blur"],
                },
                {
                    validator: Validate.isMobile,
                },
                ],

                address: [{
                    required: true,
                    message: '请输入本人家庭地址',
                    trigger: ['blur', 'change']
                }],

                contactsName: [{
                    required: true,
                    message: '请输入紧急联系人姓名',
                    trigger: ['blur', 'change']
                }],
                contactsPhone: [{
                    required: true,
                    message: '请输入紧急联系人手机号码',
                    trigger: ['blur', 'change']
                },
                {
                    validator: Validate.isMobile,
                },],
                maritalStatus: [{
                    required: true,
                    message: '请选择婚姻状况',
                    trigger: ['blur', 'change']
                }],
                submitType: [{
                    required: true,
                    message: '请选择工作状况',
                    trigger: ['blur', 'change']
                }],
                passportImg: [{
                    required: true,
                    message: '请上传护照照片',
                    trigger: ['blur', 'change']
                }],
            },
            industry: [],
            models: {},
            selectData: [],
            keywordName: [],
            showcoordinateLead: false,
            userList: [],
            orderItem: {},
            disabledBtn: false,

        }
    },
    components: {},
    onLoad(option) {
        this.orderCode = option.orderCode
        this.statusBarHeight = uni.getStorageSync('statusBarHeight')
        this.getOrderInfoM()
    },
    onReady() {
        // this.$refs.uForm.setRules(this.rules)
    },
    methods: {
        getOrderInfoM() {
            this.$asynApi.getOrderInfo(this.orderCode).then(res => {
                this.orderItem = res.data
            })
        },

        // 预览图片
        LookProjectImages(index, key) {
            let that = this
            uni.previewImage({
                // showmenu:true,
                current: index,
                urls: that.orderItem.order[key].split(','),
                // longPressActions: {
                //     itemList: ['保存图片'],
                //     success(data) {
                //         let imgurl = value
                //         that.saveImage(imgurl)
                //     },
                //     fail: function (err) {
                //         console.log(err.errMsg);
                //     }
                // },
            })
        },
        gotoPage(url) {
            console.log(url)
            uni.navigateTo({
                url: url,
            })
        },
    },
}
</script>

<style scoped lang="scss">
page {
    width: 100%;
    height: 100%;
}
.addForm {
    background: radial-gradient(4000rpx 1000rpx at 300rpx 0, #d9eaf8, #f6f7fb);
    // background-color: #eee;
    min-height: 100vh;
}

.form2Plan {
    // position: relative;

    padding: 30rpx;

    // position: relative;
    // top: -100rpx;
    .topBox {
        width: 100%;
        background-color: #fff;
        border-radius: 10rpx;
        left: 30rpx;
        .topNational {
            border-radius: 10rpx 10rpx 0rpx 0rpx;
            background-size: 100% 100%;
            padding: 34rpx 34rpx 34rpx 34rpx;
            text-align: center;
            color: #fff;
            // border-bottom: 2rpx #3868ff solid;
            background-image: url("~@/static/addFromTop.png");
            font-size: 38rpx;
            font-weight: 600;
            view:nth-child(1) {
                font-size: 38rpx;
                font-weight: 600;
            }
            view:nth-child(2) {
                font-size: 20rpx;
                font-weight: 500;
            }
        }
        .topTitle {
            background-size: 100% 100%;
            padding: 34rpx 34rpx 10rpx 34rpx;
            // text-align: center;
            color: #000;
            font-size: 32rpx;
            // font-weight: 600;
        }
        .topText {
            padding: 34rpx;
            display: flex;
            justify-content: center;
            color: #333;
            text-align: center;
            .item {
                border-right: 1rpx rgb(236, 236, 236) solid;
                width: 30%;
                view:nth-child(1) {
                    font-size: 30rpx;
                }
                view:nth-child(2) {
                    margin-top: 10rpx;
                    color: #666;
                    font-size: 22rpx;
                }
            }
        }
        margin-bottom: 30rpx;
    }

    .detailBox {
        border-radius: 10rpx;
        width: calc(100% - 80rpx);
        background-color: #ffffff;
        padding: 20rpx 40rpx 20rpx 40rpx;
        .statusBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 0rpx 20rpx 0rpx;
            .statusBoxL {
                display: flex;
                align-items: center;
            }

            .reviewStatus {
                margin-left: 10rpx;
                font-size: 22rpx;
                border-radius: 6rpx;
                padding: 2rpx 12rpx;
            }
            .reviewStatus1 {
                margin-right: 10rpx;
                font-size: 22rpx;
                background-color: #b7f57d;
                color: #333;
            }
            .reviewStatus2 {
                margin-right: 10rpx;
                font-size: 22rpx;
                background-color: #f5b87f;
                color: #333;
            }
            .downText {
                font-size: 26rpx;
                // line-height: 2;
                font-weight: 600;
                // color: #3868ff;
            }
            .status {
                font-size: 30rpx;
                font-weight: 600;
            }
        }
        .textTitleBox {
            border-left: 8rpx solid #3187ff;
            margin: 20rpx 0rpx 20rpx 0rpx;
            padding-left: 20rpx;
        }
        .detailItem {
            display: flex;
            justify-content: space-between;
            border-bottom: #f1f1f1 1rpx solid;
            padding: 16rpx 0;
            font-size: 26rpx;
        }
        .detailItemImg {
            // display: flex;
            // justify-content: space-between;
            border-bottom: #f1f1f1 1rpx solid;
            padding: 16rpx 0;
            font-size: 26rpx;
            image {
                width: 30%;
                height: 25vw;
            }
        }
    }
}
</style>